<%@ page trimDirectiveWhitespaces="true" language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/mytag" prefix="yjd"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta name="author" content="m.yijiedai.com">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<style>
			* { margin: 0;padding: 0;list-style: none;}
			a,a:hover { text-decoration: none;}
			.canvans { margin: 30px auto;width: 300px;height: auto;}
			#canvans {margin: 0 auto;}
			.canvans-list { max-width: 640px;height: auto;margin: 0 auto;width: 100%;}
			.canvans-list h1 { text-align: center;color: #fea100;font-size: 24px;margin-bottom: 30px;}
			.canvans-tips { width: 80%;color: #999999;font-size: 16px;line-height: 25px;margin: 0 auto;padding-bottom: 50px;}
			.canvans-btn { width: 90%;height: 50px;display: block;background: #FEA100;color: #fff;text-align: center;line-height: 50px;border-radius: 5px;margin: 0 auto;font-size: 18px;}
		</style>
	</head>
	<body style="background: #fff;">
		<div id="page">
			<div class="canvans">
				<canvas id="canvans" width="300" height="150"></canvas>
			</div>
			<div class="canvans-list">
				<h1>恭喜您，提交成功</h1>
				<div class="canvans-tips">第三方支付平台正在处理充值订单，您将很快收到充值结果短信，请耐心等待。</div>
				<a class="canvans-btn" href="https://u.yijiedai.com/main">完成</a>
			</div>
		</div>
		<script>
			var c=document.getElementById("canvans");
			var ctx=c.getContext("2d");
			var s=0,x=180,y=45;
			ctx.lineWidth=1;
			ctx.strokeStyle = '#FEA100';
			
			var ss=setInterval(function(){	
				ctx.beginPath();
				s=s+0.02;
				if (s>=3.75-1.9){
					ctx.moveTo(x,y);
					if (x>150 && y<85){
						x=x-1.5;
						y=y+2;
						ctx.lineTo(x,y);
						
					}
					else{
						ctx.moveTo(x,y);
						x--;
						y--;
						ctx.lineTo(x,y);
						if (x<=137 && y<=72){
							clearInterval(ss)
						}
					}									

					ctx.stroke();
					
					ctx.closePath();
					
				}else{
					ctx.clearRect(0,0,300,300);
					ctx.arc(150,75,43,Math.PI*1.9,Math.PI*(s+1.9),false);
					
					ctx.stroke();
					
				}
				
			},8);
		</script>
	</body>
	<script type='text/javascript'>
      var _vds = _vds || [];
      window._vds = _vds;
      (function(){
        _vds.push(['setAccountId', 'addfd6db12adeea9']);
        (function() {
          var vds = document.createElement('script');
          vds.type='text/javascript';
          vds.async = true;
          vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(vds, s);
        })();
      })();
    </script>
</html>
